<div class="footer">
    <div class="footer__db footer__db--dimmed footer__db--expanded footer__db-open" id="footer__db-open">
        <i class="fa fa-plus"></i><span class="footer__db-text">&nbsp;{{res 'footerOpen'}}</span>
    </div>
    <div class="footer__center">
        {{#each files as |file|}}
        <div class="footer__db footer__db-item footer__center-vault-item{{#unless file.active}} footer__db--dimmed{{/unless}}"
            data-file-id="{{file.id}}" id="footer__db--{{file.id}}">
            <i class="fa fa-{{#if file.active}}unlock{{else}}lock{{/if}}"></i> {{file.name}}
            {{#if file.syncing~}}
                <i class="fa fa-rotate spin footer__db-sign"></i>
            {{~else if file.syncError~}}
                <i class="fa {{#if file.modified}}fa-circle{{else}}fa-circle-o{{/if}} footer__db-sign footer__db-sign--error"
                title="{{res 'footerSyncError'}}: {{file.syncError}}"></i>
            {{~else if file.modified~}}
            <i class="fa fa-circle footer__db-sign"></i>
            {{~/if}}
        </div>
        {{/each}}
    </div>
    <div class="footer__btn footer__btn-help" title="{{res 'help'}}" tip-placement="top" id="footer__btn-help"><i class="fa fa-question"></i></div>
    <div class="footer__btn footer__btn-settings" title="{{res 'settings'}}" tip-placement="top" id="footer__btn-settings">
        {{#if updateAvailable}}
        <i class="fa fa-bell footer__update-icon"></i>
        {{else}}
        <i class="fa fa-gear"></i>
        {{/if}}
    </div>
    <div class="footer__btn footer__btn-generate" title="{{res 'footerTitleGen'}}" tip-placement="top" id="footer__btn-generate"><i class="fa fa-bolt"></i></div>
    <div class="footer__btn footer__btn-lock" title="{{res 'footerTitleLock'}}" tip-placement="top-left" id="footer__btn-lock"><i class="fa fa-right-from-bracket"></i></div>
</div>
